<template>
	<view class="onlineOrder">
		<form @submit="formSubmit">
			<view class="form">
				<view class="row b-b">
					<view class="title">银行</view>
					<view class="cont select">
						<input class="uni-input" :value="form.bankName" @focus="showSelectPicker" placeholder="请选择"/>
						<select-picker ref="selectPicker" :picker-list="pickerList" :region-list="pickregion" @onConfirm="onConfirmSelect" />
					</view>
					<text class="cell-more iconfont icon-you"></text>
				</view>
				<view class="row b-b">
					<view class="title">银行卡号</view>
					<view class="cont">
						<input type="number" class="uni-input" v-model="form.accountId" placeholder="请输入" :maxlength="22" />
					</view>
				</view>
				<view class="row b-b">
					<view class="title">户名</view>
					<view class="cont">
						<input class="uni-input" v-model="form.bankUser" placeholder="请输入" :maxlength="8" />
					</view>
				</view>
				<view class="row b-b">
					<view class="title">支行</view>
					<input class="uni-input" v-model="form.bankDetailName" placeholder="请输入" />
				</view>
			</view>
			<!-- <view class="form">
				<view class="row b-b">
					<view class="title">手机号</view>
					<view class="cont">
						<input type="number" class="uni-input" v-model="form.consigneeName" placeholder="请输入" :maxlength="11" />
					</view>
				</view>
				<view class="row b-b">
					<view class="title">验证码</view>
					<view class="cont">
						<input type="number" class="uni-input" v-model="form.consigneeName" placeholder="请输入" :maxlength="11" />
					</view>
				</view>
			</view> -->
			<view class="card">
				<view class="tit1">提现金额(元)</view>
				<view class="row b-b">
					<view class="title">￥</view>
					<input class="uni-input" v-model="form.money" placeholder="请输入" :maxlength="10" />
				</view>
				<view class="row">
					<text class="label1">当前可用余额：</text>
					<text class="price">¥{{balance||0}}</text>
				</view>
				<button class="btn-link" form-type="submit">提现</button>
				<view class="btn-tip">
					每天9:00-18:00可提现
					<navigator class="btn-rule" url="/userPages/carryCash/rule">提现规则</navigator>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import areaPicker from "@/components/area-picker.vue"
	import selectPicker from "@/components/select-picker.vue"
	import uploadImages from "@/components/upload-images.vue"
	import { brankList } from "./const"
	export default {
		components:{
			areaPicker,
			selectPicker,
			uploadImages
		},
		data() {
			return {
				form:{
					money:null,
					payType:2, // 1-微信，2银行
					accountId:'', // 银行账号
				  bankName:'', // 银行
					bankUser:'',	//	户名
					bankDetailName:'' //支行
				},
				isSelect:false,
				region: ['北京市','北京市','东城区'],
				pickregion:['品牌1'],
				pickerList:brankList,
				balance:null
			}
		},
		onLoad(options){
			this.balance = options.balance
			this.pageInit()
		},
		computed:{
			pickerValue() {
				return this.isSelect?this.region.join(' '):''
			}
		},
		methods: {
			async pageInit() {
							const { code,data  } = await this.$apis.postApi('/user/getLastBankAccount',{})
							if(code!=200) return
							const {accountId,bankName,bankUser,bankDetailName} = data
							this.form = {
								accountId:accountId, // 银行账号
							  bankName:bankName, // 银行
								bankUser:bankUser,	//	户名
								bankDetailName:bankDetailName, //支行
								money:null,
								payType:2, // 1-微信，2银行
							}
						},
			// 省市区联动初始化
			showSelectPicker() {
				this.$refs.selectPicker.showPicker();
			},
			onConfirmSelect(e) {
				this.form.bankName = e
			},
			showThreePicker() {
				this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				this.isSelect = true
				this.region = e.map(item=>(item.name))
			},
			formSubmit() {
				if (!this.form.bankName) {
					this.$api.msg('请选择银行')
					return
				} else if (!this.form.accountId) {
					this.$api.msg('请输入银行卡号')
					return
				} else if (!(/^\d{16,22}$/).test(this.form.accountId)) {
					this.$api.msg('银行卡号格式错误')
					return
				} else if (!this.form.bankUser) {
					this.$api.msg('请输入户名')
					return
				} else if (!this.form.bankDetailName) {
					this.$api.msg('请输入支行')
					return
				} else if (!this.form.money||this.form.money==0) {
					this.$api.msg('提现金额不能为空或0')
					return
				} else if (Number(this.form.money)>Number(this.balance)) {
					this.$api.msg('最大提现金额为￥'+(this.balance||0))
					return
				} 
				this.$apis.postApi('/deal/withdraw', this.form).then(({code,message})=>{
					if(code==200){
						this.$api.msg(`提现申请成功`)
						this.$api.prePage(3).loadData('refresh')
						setTimeout(()=>{
							uni.navigateBack({delta: 2})
						}, 800)
					} else {
						this.$api.msg(message);
					}
				})
			}
		}
	}
</script>
<style lang='scss' scoped>
.onlineOrder{
	padding: 20upx;
}
.form{
	padding: 10upx 24upx;
	background: #fff;
	display: block;
  box-sizing: border-box;
  border-radius: 16upx;
  margin-top: 20upx;
	.cont{
		flex: 1;
		.uni-input{
			width: 100%;
		}
	}
}
.row{
	padding:20upx 0;
	min-height: 90upx;
	background: #fff;
	display: flex;
	position: relative;
	.title{
    font-size: 30upx;
    color: #000000;
    font-weight: 400;
    width: 130upx;
    white-space: nowrap;
  }
	.uni-input{
		font-size: 30upx;
		color: #444444;
		margin-left: 30upx;
	}
	.label1{
		font-size: 26upx;
		color: #444444;
	}
	.price{
		font-size: 26upx;
		color: #DD0717;
	}
}
.card{
	padding: 30upx 26upx;
	background: #fff;
	display: block;
  min-height: calc(100vh - 460upx);
  box-sizing: border-box;
  border-radius: 16upx;
	position: relative;
	margin-top: 20upx;
	.title{
		width: auto;
	}
	.tit1{
		font-size: 28upx;
		margin-bottom: 10upx;
	}
	.uni-input{
		flex: 1;
	}
	.btn-link{
		height: 88upx;
		margin: 90upx auto 0;
	}
	.btn-tip{
		margin-top: 24upx;
		font-size: 26upx;
		color: #666;
		text-align: center;
	}
	.btn-rule{
		font-size: 26upx;
		color: #4083F0;
		padding-left: 10upx;
		display: inline-block;
		background: none;
	}
}
</style>
